/*
 * Copyright 2019 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import classNames from "classnames";
import * as  React from "react";
import {CSSProperties} from "react";
import {componentClassName} from "../components/style";
import {getIcon, loadIcons} from "./icon";
import "./index.scss";

export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type SVGProps = Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'type'>;

interface IconProps extends SVGProps {
    className?: string;
    style?: CSSProperties;
    type: string;
    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
}

export default class Icon extends React.Component<IconProps> {

    public static defaultProps = {
        size: 'md',
    };

    public constructor(props: Readonly<IconProps>) {
        super(props);
    }

    public componentDidMount(): void {
        loadIcons();
    }


    public render() {

        const {type, size, className, ...restProps} = this.props;
        return (
            <i className={classNames(componentClassName('icon'),
                componentClassName(`icon-${type}`),
                componentClassName(`icon-size-${size}`), className)} {...restProps}>
                <svg width="1em" height="1em" fill="currentColor">
                    <use href={`#${getIcon(type)}`}/>
                </svg>
            </i>
        );
    }
}
